body { 
margin: 0; 
overflow: hidden; 
height: 100vh; 
font-family: 'Press Start 2P', cursive; 
image-rendering: pixelated; 
image-rendering: -moz-crisp-edges; 
image-rendering: -webkit-optimize-contrast; 
} 
.press-start-2p-regular { 
font-family: "Press Start 2P", system-ui; 
font-weight: 600; 
font-style: normal; 
} 
.sky { 
width: 100%; 
height: 100%; 
background-color: #2F2483; 
position: relative; 
overflow: hidden; 
image-rendering: pixelated; 
image-rendering: -moz-crisp-edges; 
image-rendering: -webkit-optimize-contrast; 
} 
.stars-container { 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
pointer-events: none;  
} 
.star { 
position: absolute; 
width: 2px;  
height: 2px; 
background-color: #FFF;  
opacity: 0.9; 
animation: twinkle-pixel 2s infinite alternate; 
filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.5));  
} 
/* Positioning for small stars */ 
.small-star { 
opacity: 0.9; 
} 
.small-star:nth-child(1) { top: 10%; left: 80%; } 
.small-star.s2 { top: 15%; left: 80%; } 
.small-star.s3 { top: 25%; left: 30%; } 
.small-star.s4 { top: 35%; left: 55%; } 
.small-star.s5 { top: 45%; left: 5%; } 
.small-star.s6 { top: 55%; left: 70%; } 
.small-star.s7 { top: 65%; left: 20%; } 
.small-star.s8 { top: 75%; left: 90%; } 
.small-star.s9 { top: 85%; left: 40%; } 
.small-star.s10 { top: 10%; left: 45%; } 
.small-star.s11 { top: 60%; left: 8%; } 
.small-star.s12 { top: 20%; left: 60%; } 
/* Large Stars (5-pointed star shape using box-shadow) */ 
.large-star-1, .large-star-2, .large-star-3, .large-star-4, .large-star-5 { 
width: 0;  
height: 0; 
background: transparent; 
box-shadow: 
0 0 0 4px #FFFF00,  
0 -4px 0 4px #FFFF00, -2px 2px 0 4px #FFFF00, 
2px 2px 0 4px #FFFF00, -4px 0 0 4px #FFFF00, 
4px 0 0 4px #FFFF00, -2px -2px 0 4px #FFFF00, 
2px -2px 0 4px #FFFF00, -6px 0 0 4px #FFFF00,  
6px 0 0 4px #FFFF00, 
0 4px 0 4px #FFFF00,  
0 -6px 0 4px #FFFF00,  -5px -1px 0 4px rgba(200, 200, 0, 0.5),  
5px -1px 0 4px rgba(200, 200, 0, 0.5), -1px -5px 0 4px rgba(200, 200, 0, 0.5), -1px 5px 0 4px rgba(200, 200, 0, 0.5), -3px 3px 0 4px rgba(200, 200, 0, 0.5), 
3px 3px 0 4px rgba(200, 200, 0, 0.5), -3px -3px 0 4px rgba(200, 200, 0, 0.5), 
3px -3px 0 4px rgba(200, 200, 0, 0.5) 
; 
animation: pixel-star-twinkle 3s infinite alternate; 
} 
.large-star-1 { top: 13%; left: 20%; transform: scale(2); } 
.large-star-2 { top: 18%; left: 76%; transform: scale(1.3); animation-delay: -1s; } 
.large-star-3 { top: 19%; left: 49%; transform: scale(1.6); animation-delay: -2s; } 
.large-star-4 { top: 46%; left: 8%; transform: scale(1.2); animation-delay: -0.5s; } 
.large-star-5 { top: 38%; left: 90%; transform: scale(3); animation-delay: -2.5s; } 
/* Twinkling animation for pixel stars */ 
@keyframes pixel-star-twinkle { 
0%, 100% { opacity: 1; transform: scale(1); } 
50% { opacity: 0.7; transform: scale(0.9); } 
} 
@keyframes twinkle-pixel { 
0%, 100% { opacity: 0.9; } 
    50% { opacity: 0.6; } 
} 
 
.clouds-container { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 50%;  
    pointer-events: none; 
} 
 
.cloud { 
    position: absolute; 
    width: 0;  
    height: 0; 
    background: transparent;  
    opacity: 0.8; 
    filter: drop-shadow(0 0 5px rgba(0,0,0,0.2));  
    animation: movePixelClouds 60s linear infinite; 
} 
 
/* Pixelated Cloud Shape 1 */ 
.pixel-cloud-1 { 
    top: 50%; 
    left: -20%;  
    transform: translateY(-50%); 
    box-shadow: 
        /* Base layer of pixels for the cloud shape */ 
        0 0 0 4px #E0FFFF, /* Main body light blue */ 
        8px 0 0 4px #E0FFFF, 
        16px 0 0 4px #E0FFFF, 
        24px 0 0 4px #E0FFFF, 
        32px 0 0 4px #E0FFFF, 
        40px 0 0 4px #E0FFFF, 
        48px 0 0 4px #E0FFFF, 
        56px 0 0 4px #E0FFFF, 
 
        4px -4px 0 4px #E0FFFF, 
        12px -4px 0 4px #E0FFFF, 
        20px -4px 0 4px #E0FFFF, 
        28px -4px 0 4px #E0FFFF, 
        36px -4px 0 4px #E0FFFF, 
        44px -4px 0 4px #E0FFFF, 
        52px -4px 0 4px #E0FFFF, 
 
        8px -8px 0 4px #E0FFFF, 
        16px -8px 0 4px #E0FFFF, 
        24px -8px 0 4px #E0FFFF, 
        32px -8px 0 4px #E0FFFF, 
        40px -8px 0 4px #E0FFFF, 
 
        16px -12px 0 4px #E0FFFF, 
        24px -12px 0 4px #E0FFFF, 
        32px -12px 0 4px #E0FFFF, 
 
        4px 4px 0 4px #C0E0FF, 
        12px 4px 0 4px #C0E0FF, 
        20px 4px 0 4px #C0E0FF, 
        28px 4px 0 4px #C0E0FF, 
        36px 4px 0 4px #C0E0FF, 
        44px 4px 0 4px #C0E0FF, 
        52px 4px 0 4px #C0E0FF, 
        60px 0 0 4px #C0E0FF,  
        -4px 0 0 4px #C0E0FF  
    ; 
} 
 
/* Pixelated Cloud Shape 2 (different size and position) */ 
.pixel-cloud-2 { 
    top: 60%; 
    left: -50%; 
    transform: translateY(-50%); 
    animation-delay: -4s;  
    animation-duration: 30s; 
    opacity: 0.7; 
    box-shadow: 
        /* Smaller, more spread out cloud */ 
        0 0 0 4px #E0FFFF, 
        10px 0 0 4px #E0FFFF, 
        20px 0 0 4px #E0FFFF, 
        30px 0 0 4px #E0FFFF, 
        40px 0 0 4px #E0FFFF, 
 
        5px -5px 0 4px #E0FFFF, 
        15px -5px 0 4px #E0FFFF, 
        25px -5px 0 4px #E0FFFF, 
        35px -5px 0 4px #E0FFFF, 
 
        10px -10px 0 4px #E0FFFF, 
        20px -10px 0 4px #E0FFFF, 
 
        5px 5px 0 4px #C0E0FF, 
        15px 5px 0 4px #C0E0FF, 
        25px 5px 0 4px #C0E0FF, 
        35px 5px 0 4px #C0E0FF 
    ; 
} 
 
/* Pixelated Cloud Shape 3 (another variation) */ 
.pixel-cloud-3 { 
    top: 70%; 
    left: -80%; 
    transform: translateY(-50%); 
    animation-delay: -3s; 
    animation-duration: 25s; /* Medium speed */
    opacity: 0.9; 
    box-shadow: 
        /* Taller, puffier cloud */ 
        0 0 0 4px #E0FFFF, 
        8px 0 0 4px #E0FFFF, 
        16px 0 0 4px #E0FFFF, 
        24px 0 0 4px #E0FFFF, 
 
        4px -4px 0 4px #E0FFFF, 
        12px -4px 0 4px #E0FFFF, 
        20px -4px 0 4px #E0FFFF, 
 
        8px -8px 0 4px #E0FFFF, 
        16px -8px 0 4px #E0FFFF, 
 
        /* Shading */ 
        4px 4px 0 4px #C0E0FF, 
        12px 4px 0 4px #C0E0FF, 
        20px 4px 0 4px #C0E0FF, 
        -4px 0 0 4px #C0E0FF
    ; 
}
 
/* Pixelated Cloud Shape 4 (smaller, in the foreground) */ 
.pixel-cloud-4 { 
    top: 40%; 
    left: -10%; 
    transform: translateY(-50%) scale(0.8); 
    animation-delay: 2s; 
    animation-duration: 30s;  
    opacity: 0.6; 
    box-shadow: 
        0 0 0 4px #E0FFFF, 
        8px 0 0 4px #E0FFFF, 
        16px 0 0 4px #E0FFFF, 
 
        4px -4px 0 4px #E0FFFF, 
        12px -4px 0 4px #E0FFFF, 
 
        /* Shading */ 
        4px 4px 0 4px #C0E0FF, 
        12px 4px 0 4px #C0E0FF 
    ; 
} 
.pixel-cloud-5 { 
    top: 70%; 
    left: -10%; 
    transform: translateY(-50%) scale(0.8); 
    animation-delay: 1s; 
    animation-duration: 20s;  
    opacity: 0.6; 
    box-shadow: 
        0 0 0 4px #E0FFFF, 
        8px 0 0 4px #E0FFFF, 
        16px 0 0 4px #E0FFFF, 
 
        4px -4px 0 4px #E0FFFF, 
        12px -4px 0 4px #E0FFFF, 
 
        /* Shading */ 
        4px 4px 0 4px #C0E0FF, 
        12px 4px 0 4px #C0E0FF 
    ; 
} 
/* Cloud movement animation */ 
@keyframes movePixelClouds { 
    0% { 
        transform: translateX(-100%) translateY(-50%);  
    } 
    100% { 
        transform: translateX(200vw) translateY(-50%);  
    } 
} 
body { 
    margin: 0; 
    height: 100vh;  
    display: flex;  
    justify-content: center;  
    align-items: center;  
    background-color: #2F2483;  
    font-family: 'Press Start 2P', cursive; 
    overflow: hidden;  
    image-rendering: pixelated; 
    image-rendering: -moz-crisp-edges; 
    image-rendering: -webkit-optimize-contrast; 
} 
 
.container { 
    position: relative; 
    width: 100%; 
    height: 100%; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 
 
:root { 
    --title-pos-x: 50%;  
    --title-pos-y: 29%;  
    --title-transform-x: -50%;  
    --title-transform-y: -50%;  
} 
 
body { 
    margin: 0; 
    height: 100vh;  
    width: 100vw; 
    background-color: #2F2483;  
    font-family: 'Press Start 2P', cursive;  
    overflow: hidden;  
    image-rendering: pixelated; 
    image-rendering: -moz-crisp-edges; 
    image-rendering: -webkit-optimize-contrast; 
    position: relative; 
} 
 
.container { 
    width: 100%; 
    height: 100%; 
} 
 
 
.title { 
    position: absolute; 
    top: var(--title-pos-y); 
    left: var(--title-pos-x); 
    transform: translate(var(--title-transform-x), var(--title-transform-y)); 
 
    color: #FFD700;  
    font-size: 5vw; 
    text-align: center; 
    text-shadow: 
        2px 2px 0 #000,  
        -2px -2px 0 #000, 
        2px -2px 0 #000, 
        -2px 2px 0 #000, 
        4px 4px 0 rgba(0,0,0,0.5); 
    letter-spacing: 0.1em; 
    white-space: nowrap;  
    user-select: none; 
    z-index: 10;  
} 
 
@media (max-width: 500px) { 
    .title { 
        font-size: 6vw; 
    } 
} 
@media (max-width: 59px) { 
    .title { 
        font-size: 3vw; 
    } 
} 
 
:root { 
    --button-common-bg: #6B8E23; 
    --button-common-border: #4D6619;  
    --button-common-text: #F8F8FF;   
    --button-common-hover-bg: #8AC24E;  
    --button-common-hover-border: #5A7F29; 
  } 
.button-container { 
    position: absolute; 
    top: 37%; 
    left: 50%; 
    transform: translateX(-50%); 
    display: flex; 
    flex-direction: column;  
    justify-content: center; 
    align-items: center; 
    gap: 20px;  
    padding: 20px; 
    max-width: 100%; 
    z-index: 10; 
} 
 
.pixel-button {
  font-family: 'Press Start 2P', cursive;
  font-size: 15px;
  padding: 15px 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  text-decoration: none;   /* Removes underline */
  line-height: 1.2;        /* Helps vertical alignment */
  border: none;
  cursor: pointer;
  background-color: var(--button-common-bg);
  color: var(--button-common-text);
  position: relative;
  transition: background-color 0.1s linear;
  white-space: nowrap;
  min-width: 250px;
}
 
.pixel-button::before { 
    content: ''; 
    position: absolute; 
    top: -4px; 
    left: -4px; 
    right: -4px; 
    bottom: -4px; 
    background: transparent; 
    box-shadow: 
        0 0 0 4px var(--button-common-border), 
        4px 0 0 4px var(--button-common-border) inset, 
        0 4px 0 4px var(--button-common-border) inset, 
        -4px 0 0 4px var(--button-common-border) inset; 
    z-index: -1; 
} 
 
.pixel-button:hover { 
    background-color: var(--button-common-hover-bg); 
} 

.pixel-button:hover::before { 
  box-shadow: 
    0 0 0 4px var(--button-common-hover-border), 
    4px 0 0 4px var(--button-common-hover-border) inset, 
    0 4px 0 4px var(--button-common-hover-border) inset, 
    -4px 0 0 4px var(--button-common-hover-border) inset; 
}

/* Responsive styles */
@media (max-width: 1024px) {
  .button-container {
    top: calc(50% + 15vw);
  }

  .pixel-button {
    font-size: 1.8vw;
    padding: 12px 25px;
    min-width: 200px;
  }
}

@media (max-width: 768px) {
  .button-container {
    top: calc(50% + 20vw);
    max-width: 80%;
  }

  .pixel-button {
    font-size: 3vw;
    padding: 10px 20px;
    min-width: 180px;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .button-container {
    top: calc(50% + 30vw);
  }

  .pixel-button {
    font-size: 4vw;
    padding: 8px 18px;
    min-width: 140px;
  }
}
:root {
    /* Define custom properties for colors */
    --light-purple: #a855f7;
    --dark-purple: #7e22ce;
    --teal: #2dd4bf;
    --fuschia: #f0abfc;
    --off-white: #f8fafc;
    --pixel-size: 20px; /* Define pixel size as a variable */
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #0d0d21; /* Darker space background */
    margin: 0;
    overflow: hidden; /* Hide anything that goes beyond the viewport */
    position: relative; /* Needed for absolute positioning of spaceship-wrapper */
}

/* Wrapper to allow the spaceship to move outside initial viewport */
.spaceship-wrapper {
    position: absolute;
    animation: free-fly 25s linear infinite;
}

.spaceship-container {
    display: flex;
    flex-direction: column;
}

.pixel-row {
    display: flex;
}

.pixel {
    width: var(--pixel-size);
    height: var(--pixel-size);
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

/* Spaceship Colors (using custom properties) */
.dark-purple {
    background-color: var(--dark-purple);
}

.light-purple {
    background-color: var(--light-purple);
}

.teal {
    background-color: var(--teal); /* For the cockpit/central element */
}

.fuschia {
    background-color: var(--fuschia);
    box-shadow: 0 0 10px var(--fuschia); 
}

.off-white {
    background-color: var(--off-white);
}

.transparent {
    background-color: transparent;
}

/* Animation Keyframes for free movement */
@keyframes free-fly {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(70vw, 10vh) rotate(25deg);
    }
    50% {
        transform: translate(50vw, 80vh) rotate(-15deg);
    }
    75% {
        transform: translate(-10vw, 40vh) rotate(30deg);
    }
    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}